<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { CreateElement } from 'vue'
import { GroupOption } from '../normal-type'

@Component({
  name: 'RenderSelect'
})
export default class extends Vue {
  @Prop()
  private value: any
  // options
  @Prop({ type: Array, required: false, default: () => [] })
  private options!: Array<GroupOption>

  render (h: CreateElement) {
    let options = this.options.map(_ =>
      h('el-option', {
        props: { ..._, value: _.value, label: _.text }
      })
    )
    return h(
      'el-select',
      {
        attrs: this.$attrs,
        props: { ...this.$attrs, value: this.value },
        on: {
          ...this.$listeners,
          input: (v: any) => {
            this.$emit('input', v)
          }
        }
      },
      options
    )
  }
}
</script>
